<template>
	<view class="modify-wrap">
		<view class="cell row b-b">
			<text class="tit">旧密码</text>
			<input class="input" :type="oldPasswordFlg?'text':'password'"
			maxlength="20" v-model="oldPassword" placeholder="请输入旧密码" placeholder-class="placeholder"/>
			<view class="clear iconfont iconguanbi1" v-if="oldPassword"
			@tap="clear('old')"></view>
			<text @tap="toggleShow('old')" class="mima iconfont" :class="oldPasswordFlg?'iconmimakejian':'iconyincangmima'"></text>
		</view>
		<view class="cell row b-b">
			<text class="tit">新密码</text>
			<input class="input" :type="newPasswordFlg?'text':'password'"
			maxlength="20" v-model="newPassword" placeholder="请输入6位以上新密码(数字/字母)" placeholder-class="placeholder" />
			<view class="clear iconfont iconguanbi1" v-if="newPassword"
			@tap="clear('new')"></view>
			<text @tap="toggleShow('new')" class="mima iconfont" :class="newPasswordFlg?'iconmimakejian':'iconyincangmima'"></text>
		</view>
		<view class="cell row b-b">
			<text class="tit">确认密码</text>
			<input class="input" :type="passwordReFlg?'text':'password'"
			 maxlength="20" v-model="passwordRe" placeholder="请再次输入新密码" placeholder-class="placeholder"/>
			 <view class="clear iconfont iconguanbi1" v-if="passwordRe"
			 @tap="clear('repeate')"></view>
			<text @tap="toggleShow('repeate')" class="mima iconfont" :class="passwordReFlg?'iconmimakejian':'iconyincangmima'"></text>
		</view>
		<view class="bot-btn-wrap fix-bot bg-none">
			<mix-button ref="confirmBtn" text="确认修改" icon="icon-jia2"
			:iconSize="36" :isConfirm="false"
			 @onConfirm="submit()"></mix-button>
		</view>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import mixButton from '@/components/mix-button/mix-button.vue';
	export default {
		components: {
			mixButton
		},
		data() {
			return {
				oldPassword:'',
				newPassword:'',
				passwordRe:'',
				oldPasswordFlg:false,
				newPasswordFlg:false,
				passwordReFlg:false,
			}
		},
		onLoad(){
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
		},
		methods: {
			toggleShow(type){
				if(type==='old'){
					this.oldPasswordFlg=!this.oldPasswordFlg
				}else if(type==='new'){
					this.newPasswordFlg=!this.newPasswordFlg
				}else if(type==='repeate'){
					this.passwordReFlg=!this.passwordReFlg
				}
			},
			clear(type){
				if(type==='old'){
					this.oldPassword='';
				}else if(type==='new'){
					this.newPassword='';
				}else if(type==='repeate'){
					this.passwordRe='';
				}
			},
			submit(){
				const data = this.info;
				if(!this.oldPassword){
					this.$util.msg('请输入旧密码');
					this.$refs.confirmBtn.stop();
					return;
				}
				// else if (!this.$util.checkStr(this.oldPassword, 'pwd')) {
				// 	this.$util.msg('旧密码长度在6~18之间，并由数字、字母组成');
				// 	this.$refs.confirmBtn.stop();
				// 	return;
				// }
				if(!this.newPassword){
					this.$util.msg('请输入新密码');
					this.$refs.confirmBtn.stop();
					return;
				}else if (!this.$util.checkStr(this.newPassword, 'pwd')) {
					this.$util.msg('新密码长度在6~18之间，并由数字、字母组成');
					this.$refs.confirmBtn.stop();
					return;
				}else if (this.oldPassword===this.newPassword) {
					this.$util.msg('新密码与旧密码不能相同');
					this.$refs.confirmBtn.stop();
					return;
				}
				
				if(!this.passwordRe){
					this.$util.msg('请再次输入新密码');
					this.$refs.confirmBtn.stop();
					return;
				}else if (!this.$util.checkStr(this.passwordRe, 'pwd')) {
					this.$util.msg('新密码长度在6~18之间，并由数字、字母组成');
					this.$refs.confirmBtn.stop();
					return;
				}else if(this.newPassword!==this.passwordRe){
					this.$util.msg('两次新密码输入不一致');
					this.$refs.confirmBtn.stop();
					return;
				}else if (this.oldPassword===this.passwordRe) {
					this.$util.msg('新密码与旧密码不能相同');
					this.$refs.confirmBtn.stop();
					return;
				}
				
				let params={
					oldPassword:this.oldPassword,
					password:this.newPassword,
					passwordRe:this.passwordRe,
				};
				this.$http.updatePassWord(params).then((res) => {
					if(res.status === 0) {
						// uni.reLaunch({
						// 	url: "/pages/home/login"
						// })
						uni.navigateBack()
						uni.showToast({
							title: "密码修改成功!",
							icon: "none",
							duration: 1000
						});
						this.$util.setToken('')
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.modify-wrap{
		padding: 10rpx 36rpx 0;
		background-color: #fff;
		height: 100vh;
		.cell{
			height: 106rpx;
			font-size: 28rpx;
			.tit{
				min-width: 140rpx;
				font-size: 28rpx;
				color: #111111;
			}
			.input{
				flex: 1;
				font-size: 28rpx;
				color: #333;
				border: none;
				outline: none;
			}
			.iconfont{
				flex-shrink: 0;
				margin-right: 4rpx;
				font-size: 32rpx;
				color: #aaa;
				padding:6rpx;
			}
			switch{
				transform: scale(0.8) translateX(10rpx);
				transform-origin: center right;
			}
		}
	}
	
</style>
